<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-navbar :is-back="true" :title="changeTitle()" back-icon-color='#333333' height="50" :border-bottom="false">
		</u-navbar>
		<u-picker mode="time" v-model="time_boolen" :params="params" @confirm="submit"></u-picker>
		<u-select v-model="show" mode="single-column" :list="car_arr" @confirm="confirm"></u-select>
		<view class="list">
			<view class="description">
				<text>申请人</text>
				<text>{{full_name}}</text>
			</view>
			<view class="time">
				<view class="top">
					<text>使用时间</text>
					<text>{{startDate}}&nbsp;{{startTime}}</text>
					<image src="../../static/tupian105.png" mode="widthFix" @click="calendar(1)"></image>
				</view>
				<view class="bottom">
					<text>{{endDate}}&nbsp;{{endTime}}</text>
					<image src="../../static/tupian105.png" mode="widthFix" @click="calendar(2)"></image>
				</view>
			</view>
			<view class="vehicle">
				<text>车辆</text>
				<text>{{car_name}}</text>
				<text @click="show=true"></text>
			</view>
			<view class="license">
				<text>车牌号码</text>
				<u-input v-model="license_content" style="margin-left:200rpx; width: 200rpx;" :type="type"
					placeholder="单行输入" :border="border" input-align="right" />
			</view>
			<view class="driver">
				<text>司机</text>
				<u-input v-model="driver_content" style="margin-left:200rpx; width: 200rpx;" :type="type"
					placeholder="单行输入" :border="border" input-align="right" />
			</view>
			<view class="available">
				<text>可载人数</text>
				<u-input v-model="available_content" style="margin-left:200rpx; width: 200rpx;" :type="type"
					placeholder="单行输入" :border="border" input-align="right" />
			</view>
			<view class="number">
				<text>号码</text>
				<u-input v-model="number_content" style="margin-left:200rpx; width: 200rpx;" :type="type"
					placeholder="单行输入" :border="border" input-align="right" />
			</view>
			<view class="picture">
				<view class="photo">
					<text>图片</text>
				</view>
				<view class="add_photo">
					<image :src="item" mode="widthFix" v-for="(item,index) in vehicle_list" :key="index"
						style="width:163rpx;"></image>
				</view>
			</view>
			<view class="event">
				事件
			</view>
			<view class=""
				style="width:94%; height:15rpx; margin-left:3%; background:#F2F2F2; border-top-left-radius:12rpx; border-top-right-radius:12rpx;">
			</view>
			<textarea value="" v-model="form.event" placeholder="单行输入"
				style="width:94%; height:160rpx; margin-left:3%; background:#F2F2F2; text-indent:1em; border-bottom-left-radius:12rpx; border-bottom-right-radius:12rpx;" />
			<view class="" style="width:100%; height:30rpx;">
			</view>
		</view>
		<view class="confirm">
			<view class="verify" @click="addApply">
				{{verify}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				type: 'text',
				border: false,
				show: false,
				time_boolen: false,
				content: '',
				license_content: '',
				driver_content: '',
				available_content: '',
				number_content: '',
				input_content: '',
				boolen: false,
				verify: '提交',
				car_name: '',
				vehicle_list: [],
				car_list: [],
				car_arr: [],
				form: {
					car_id: '',
					start_time: '',
					end_time: '',
					event: '',
				},
				edit_form: {
					car_id: '',
					start_time: '',
					end_time: '',
					event: '',
					apply_id: '',
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				num: '',
				startDate: '',
				startTime: '',
				endDate: '',
				endTime: '',
				page_tag: 1,
				page_title: '',
			}
		},
		onLoad(option) {
			this.carLists();
			this.$store.dispatch('getTodos');
			if (option.obj) {
				this.page_tag = 2;
				this.delivery_obj = JSON.parse(decodeURIComponent(option.obj));
				console.log(this.delivery_obj);
				this.edit_form.apply_id = this.delivery_obj.apply_id;
				this.edit_form.start_time = this.delivery_obj.start_time;
				this.edit_form.end_time = this.delivery_obj.end_time;
				this.edit_form.event = this.delivery_obj.event;
				this.form.event = this.delivery_obj.event;
				this.edit_form.car_id = this.delivery_obj.car_id;
				this.startDate = time.format(this.delivery_obj.start_time);
				this.endDate = time.format(this.delivery_obj.end_time);
				this.car_name = this.delivery_obj.car_info ? this.delivery_obj.car_info.name : '';
				let obj = this.delivery_obj.car_info ? this.delivery_obj.car_info : null;
				if (obj) {
					this.license_content = obj.no;
					this.driver_content = obj.driver_name;
					this.available_content = obj.people;
					this.number_content = obj.driver_phone;
					this.vehicle_list = obj.pics.split(',');
				}
			}
		},
		computed: {
			...mapState(['full_name']),
		},
		methods: {
			submit(e) { //对时间的格式进行处理
				let str = '';
				console.log(e);
				switch (this.num) {
					case 1:
						this.startDate = `${e.year}.${e.month}.${e.day}`
						this.startTime = `${e.hour}:${e.minute}:${e.second}`
						str = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
						switch (this.page_tag) {
							case 1:
								this.form.start_time = Date.parse(new Date(str));
								break;
							case 2:
								this.edit_form.start_time = Date.parse(new Date(str));
								break;
						}
						break;
					case 2:
						this.endDate = `${e.year}.${e.month}.${e.day}`
						this.endTime = `${e.hour}:${e.minute}:${e.second}`
						str = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
						switch (this.page_tag) {
							case 1:
								this.form.end_time = Date.parse(new Date(str));
								break;
							case 2:
								this.edit_form.end_time = Date.parse(new Date(str));
								break;
						}
						break;
				}
			},
			changeTitle() {
				switch (this.page_tag) {
					case 1:
						this.page_title = '添加申请';
						break;
					case 2:
						this.page_title = '修改申请';
						break;
				}
				return this.page_title;
			},
			calendar(param) {
				this.time_boolen = true;
				switch (param) {
					case 1:
						this.num = 1;
						break;
					case 2:
						this.num = 2;
						break;
				}
			},
			carLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/carApply/carLists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.car_list = res.data.data;
							res.data.data.forEach((item, index) => {
								_this.car_arr.push({
									label: item.name,
									value: item.car_id,
								})
							})
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			addApply() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				switch (this.page_tag) {
					case 1:
						request({
							url: base_url + 'teacher/carApply/add',
							data: {
								...this.form,
							},
							method: 'post',
							success(res) {
								if (res.statusCode == 200) {
									console.log(res.data.data);
									_this.$toLink('../teacher_car/teacher_car', {}, 2);
								} else {
									_this.$refs.uToast.show({
										title: res.data.message || '系统错误',
										type: 'warning',
									})
								}

							}
						})
						break;
					case 2:
						this.edit_form.event = this.form.event;
						request({
							url: base_url + 'teacher/carApply/update',
							data: {
								...this.edit_form,
							},
							method: 'post',
							success(res) {
								if (res.statusCode == 200) {
									console.log(res.data.data);
									_this.$toLink('../teacher_car/teacher_car', {}, 2);
								} else {
									_this.$refs.uToast.show({
										title: res.data.message || '系统错误',
										type: 'warning',
									})
								}

							}
						})
						break;
				}
			},
			confirm(e) {
				console.log(e);
				this.car_name = e[0].label;
				switch (this.page_tag) {
					case 1:
						this.form.car_id = e[0].value;
						break;
					case 2:
						this.edit_form.car_id = e[0].value;
						break;
				}
				this.car_list.forEach(item => {
					if (item.car_id == e[0].value) {
						this.license_content = item.no;
						this.driver_content = item.driver_name;
						this.available_content = item.people;
						this.number_content = item.driver_phone;
						this.vehicle_list = item.pics.split(',');
					}
				})
				console.log(this.vehicle_list);
			}
		}

	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #F2F2F2;

		.list {
			background-color: #fff;
			margin-top: 20rpx;
			width: 710rpx;
			margin-left: 20rpx;
			border-radius: 12rpx;

			.description {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 26rpx;
					}

					&:nth-child(2) {
						color: #333333;
						font-size: 26rpx;
						width: 580rpx;
						text-align: right;
					}
				}

			}



			.time {
				width: 94%;
				margin-left: 3%;
				height: 180rpx;
				border-bottom: 1px solid #F2F2F2;

				.top {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					text {
						font-size: 26rpx;

						&:nth-child(1) {
							color: #666666;
							width: 150rpx;
						}

						&:nth-child(2) {
							color: #333333;
							width: 420rpx;
							text-align: right;
						}
					}

					image {
						&:nth-child(3) {
							width: 30rpx;
							margin-left: 50rpx;
						}
					}
				}

				.bottom {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					text {
						font-size: 26rpx;

						&:nth-child(1) {
							color: #333333;
							width: 570rpx;
							text-align: right;
						}
					}

					image {
						&:nth-child(2) {
							margin-left: 50rpx;
							width: 30rpx;
						}
					}
				}
			}

			.vehicle {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					font-size: 26rpx;

					&:nth-child(1) {
						color: #666666;
					}

					&:nth-child(2) {
						width: 550rpx;
						color: #333333;
						text-align: right;
					}

					&:nth-child(3) {
						width: 0rpx;
						margin-top: 20rpx;
						height: 0rpx;
						margin-left: 20rpx;
						border-width: 18rpx 18rpx 18rpx 18rpx;
						border-color: #ccc transparent transparent transparent;
						border-style: solid;
					}
				}
			}

			.license {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 26rpx;
					}
				}

			}

			.driver {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 26rpx;
					}
				}

			}

			.available {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 26rpx;
					}
				}

			}

			.number {
				width: 94%;
				margin-left: 3%;
				height: 90rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				text {
					&:nth-child(1) {
						color: #666666;
						font-size: 26rpx;
					}
				}

			}

			.picture {
				width: 94%;
				margin-left: 3%;
				margin-top: 25rpx;
				justify-content: flex-start;
				display: flex;

				.photo {
					width: 60rpx;
					justify-content: flex-start;
					display: flex;
					font-size: 26rpx;
					color: #666666;

				}

				.add_photo {
					width: 590rpx;
					justify-content: flex-start;
					display: flex;
					flex-wrap: wrap;

					image {
						margin-left: 18rpx;
					}

				}

			}

			.event {
				width: 94%;
				height: 78rpx;
				margin-left: 3%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 26rpx;
				color: #666666;

			}
		}

		.confirm {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.verify {
				width: 200rpx;
				height: 60rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 60rpx;
				background: linear-gradient(to right, #2C78FE, #32B0FF);
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>
